<template>
  <div class="zhuce">
    <div class="biaoqian">
      <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="logo">
      <img src="../assets/logo2.png" alt />

      <div class="xiang">
        <span>QING</span>
        <span>CHU</span>
        <span>XING</span>
      </div>
    </div>
    <div class="biao">
      <van-form @submit="onSubmit('add')" :model="add" ref="add">
        <div class="inp">
          <van-field v-model="add.userName" placeholder="用户名" left-icon="manager" />
        </div>

        <div class="inp">
          <van-field v-model="add.password" placeholder="密码" type="password" left-icon="lock" />
        </div>
        <div class="inp">
          <van-field
            v-model="add.passWordCheck"
            placeholder="确认密码"
            type="password"
            left-icon="lock"
            @blur="pass"
          />
        </div>
        <div class="inp">
          <van-field v-model="add.phonenumber" placeholder="手机号" left-icon="phone" @blur="phone" />
        </div>
        <div class="inp">
          <van-field v-model="add.nickName" placeholder="姓名" left-icon="manager-o" />
        </div>
        <div class="inp">
          <van-field v-model="add.email" placeholder="邮箱" type="email" left-icon="comment" />
        </div>
        <div class="in">
          <van-dropdown-menu>
            <van-dropdown-item v-model="add.sex" :options="option1" />
          </van-dropdown-menu>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      add: {
        password: "",
        userName: "",
        phonenumber: "",
        email: "",
        passWordCheck: "",
        nickName: "",
        sex: 1
      },
      value1: 0,
      value2: "a",
      option1: [
        { text: "男", value: 1 },
        { text: "女", value: 0 }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
    onSubmit(formName) {
      var re = /^[a-zA-Z][a-zA-Z0-9]{1,15}$/;
      if (!re.test(this.add.password)) {
        this.$toast.fail("请输入数字或字母组成的密码，最多16位");
      }

      if ("" == this.add.password) {
        this.$toast.fail("请输入密码");
      }
      if ("" == this.add.userName) {
        this.$toast.fail("请输入用户名");
      }
      if ("" == this.add.nickName) {
        this.$toast.fail("请输入姓名");
      }
      if ("" == this.add.email) {
        this.$toast.fail("请输入邮箱");
      } else {
        let paramForm = {
          password: this.add.password,
          nickName: this.add.nickName,
          userName: this.add.userName,
          email: this.add.email,
          phonenumber: this.add.phonenumber,
          sex: this.add.sex
        };
        this.$axios.post("prod-api/app/regist", paramForm).then(res => {
          if (200 == res.data.code) {
            this.$router.push("/login");
            this.$toast.fail(res.data.msg);
          } else {
            this.$toast.fail(res.data.msg);
          }
        });
      }
    },
    phone() {
      var tel = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (!tel.test(this.add.phonenumber)) {
        this.$toast.fail("请输入正确格式的电话");
        this.add.phonenumber = "";
      }
      if ("" == this.add.phonenumber) {
        this.$toast.fail("请输入电话");
      }
    },
    pass() {
      if ("" == this.add.passWordCheck) {
        this.$toast.fail("请再次输入密码");
      }
      if (this.add.passWordCheck != this.add.password) {
        this.$toast.fail("两次密码不同，请重新输入");
        this.add.passWordCheck = "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.zhuce {
  position: relative;
  .xiang {
    position: absolute;
    top: 150px;
    left: 115px;
    span {
      color: #046ac6;
    }
  }
  .biaoqian {
    position: relative;
  }
  .logo {
    position: relative;
    width: 100%;
    height: 180px;
  }
  .inp {
    margin: 0 14%;
    select {
      width: 250px;
      height: 23px;
      text-align: center;
      padding: 0px;
    }
  }

  .logo img {
    position: absolute;
    left: 60px;
    top: 30px;
  }

  .van-cell {
    width: 250px;
    border-bottom: 2px solid #eee;
    color: #046ac6;
  }
}
</style>
